<!-- 首页-新闻模块 -->
<template>
    <div class="component_news">
        <div class="component_news-title">
            <span class="title">资讯</span>
        </div>
        <div class="component_news-container">
            <template v-if="list.length">
                <div class="container-item" v-for="(item, index) in list" :key="index" @click="handleClick(item)">
                    <div class="aside-left">
                        <div class="aside-left-title">{{ item.title }}</div>
                        <div class="aside-left-time">{{item.startTime}}</div>
                    </div>
                    <div class="aside-right">
                        <img :src="item.src" alt="" srcset="">
                    </div>
                </div>
            </template>
            <van-empty v-else description="暂无数据"></van-empty>
        </div>
    </div>
</template>

<script>
import {api} from '../../utils/api';
    export default {
        data() {
            return {
                list: [],
            };
        },
        computed: {
            userInfo() {
                return this.$store.getters.userInfo || {};
            },
            communityId() {
                return this.$store.getters.communityId || '2023020751950001';
            }
        },
        onPullDownRefresh() {
            wx.startPullDownRefresh({
                complete: () => {
                    this.getTabListFn();
                    wx.stopPullDownRefresh();
                }
            })
        },
        onLoad() {
            this.getListFn();
        },
        methods: {
            handleClick(obj) {
                wx.navigateTo({
                    url: `/pages/newsDetail/main?activitiesId=${obj.activitiesId}&title=${obj.title}`
                })
            },
            getListFn() {
                wx.showLoading({ title: '加载中', mask: true });
                // const data = {
				// 	page: 1,
				// 	row: 4,
				// 	communityId: this.communityId,
				// 	typeCd: curTypeCd,
				// 	defaultShow: 'Y',
				// 	clientType: 'H5'
                // }
                // const res = await api.listActivitiess(data);
                // this.setFilePath(res.activitiess);
                this.list = [
                    {id: 1, title: '养老服务计划', startTime: '2021-12-31', src: ''},
                    {id: 2, title: '养老服务计划', startTime: '2021-12-31', src: ''},
                    {id: 3, title: '养老服务计划', startTime: '2021-12-31', src: ''},
                    {id: 4, title: '养老服务计划', startTime: '2021-12-31', src: ''},
                ];
                setTimeout(() => { wx.hideLoading(); }, 500);
            },
            setFilePath(arr) {
                let time = new Date();
                arr.map(item=>{
                    this.$set(item, 'src', `${api.getFile()}?fileId=${item.headerImg}&communityId=${this.communityId}&time=${time}`)
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
.component_news {
    background: #fff;
    padding: 0 12px;
    .component_news-title {
        line-height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .more-btn {
            height: 56rpx;
            line-height: 56rpx;
            flex-shrink: 0;
            border: 2rpx solid #eee;
            border-radius: 28rpx;
            padding: 0 24rpx;
            font-size: 28rpx;
            color: #303030;
            &::after {
                display: inline-block;
                content: ">";
                margin-left: 24rpx;
                color: #303030;
            }
            &:active {
                background: #f5f5f5;
            }
        }
    }
    .component_news-container {
        .container-item {
            height: 160rpx;
            display: flex;
            border-radius: 12rpx;
            border: 2rpx solid #eee;
            overflow: hidden;
            padding: 24rpx;
            box-shadow: 0 0 8rpx #eee;
            background: linear-gradient(to right, rgb(234, 243, 245),#fff);
            .aside-left {
                width: 100%;
                .aside-left-title {
                    max-height: 96rpx;
                    line-height: 56rpx;
                    font-size: 32rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    margin-bottom: 48rpx;
                    padding-right: 24rpx;
                }
                .aside-left-time {
                    font-size: 28rpx;
                    color: #999;
                    &::after {
                        content: "...";
                        float: right;
                        font-weight: bolder;
                        margin-top: -12rpx;
                        padding-right: 24rpx;
                    }
                }
            }
            .aside-right {
                width: 260rpx;
                border: 2rpx solid #eee;
                border-radius: 8rpx;
                overflow: hidden;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            &+.container-item {
                margin-top: 24rpx;
            }
        }
    }
}
</style>